<script setup lang="ts">
import AppIcon from './parts/AppIcon.vue';
import Titlebar from './parts/titlebar/index.vue';
import Sidebar from './parts/sidebar/index.vue';
import Statusbar from './parts/statusbar/index.vue';
</script>

<template>
  <div class="sp-homeLayout">
    <AppIcon />
    <Titlebar />
    <Sidebar />
    <Statusbar />
  </div>
</template>

<style lang="scss">
.sp-homeLayout {
  display: grid;
  grid-template-rows: 49px auto 25px;
  grid-template-columns: 49px auto;
  width: 100%;
  height: 100%;
  touch-action: none;
  forced-color-adjust: none;
}

.sp-appIcon {
  grid-area: 1;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.sp-titlebar {
  grid-area: 1 / 2 / 2 / 3;
  border-bottom: 1px solid var(--c-border);
}

.sp-sidebar {
  grid-area: 2 / 1 / 3 / 1;
  border-right: 1px solid var(--c-border);
}

.sp-statusbar {
  grid-area: 3 / 1 / 4 / 3;
  border-top: 1px solid var(--c-border);
}
</style>
